<template>
  <div>
    <el-form ref="abroadWaybillReportQueryForm" :model="abroadWaybillReportQueryData"
             :rules="abroadWaybillReportQueryRules" size="mini" label-width="65px">
      <el-row :gutter="20">
        <el-col :span="1">
          <el-tag>运单</el-tag>
        </el-col>
        <el-col :span="5">
          <el-form-item label="运单客户" prop="customerId">
            <el-select v-model="abroadWaybillReportQueryData.customerId" placeholder="请输入关键字" clearable filterable remote :remote-method="remoteCustomer"
                       :style="{width: '100%'}">
              <el-option v-for="item in customerIdOptions" :key="item.id" :label="item.text" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售人员" prop="salesmanIds">
            <el-select v-model="abroadWaybillReportQueryData.salesmanIds" placeholder="请选择销售人员" multiple clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, value) in statementSource.userNameMap" :key="value" :label="item" :value="value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客服人员" prop="servicesIds">
            <el-select v-model="abroadWaybillReportQueryData.servicesIds" placeholder="请选择客服人员" multiple clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, value) in statementSource.userNameMap" :key="value" :label="item" :value="value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的国家" prop="countryId">
            <el-select v-model="abroadWaybillReportQueryData.countryId" placeholder="请选择目的国家" multiple clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, value) in statementSource.countryNameMap" :key="value" :label="item" :value="value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物流方法" prop="shippingWays" >
            <el-select v-model="abroadWaybillReportQueryData.shippingWays" placeholder="请选择物流方法" multiple clearable filterable
                       clearable :style="{width: '100%'}">
              <el-option v-for="(item, value) in statementSource.shippingWayMap" :key="value" :label="item" :value="value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运单状态" prop="status" style="margin-bottom: 0px;">
            <el-select v-model="abroadWaybillReportQueryData.status" placeholder="请选择运单状态" multiple clearable filterable
                       :style="{width: '100%'}">
              <el-option v-for="(item, value) in statementSource.abroadWaybillStatusMap" :key="value" :label="m(item)" :value="value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <!--<el-form-item label="创建日期" prop="rangeCreatedDate">
            <el-date-picker type="daterange" :editable="false" :picker-options="pickerOptions" v-model="abroadWaybillReportQueryData.rangeCreatedDate"
                            format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                            end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
          </el-form-item>-->
          <el-row>
            <el-col :span="13">
              <el-form-item label="创建日期" prop="rangeCreatedTime">
                <el-date-picker type="datetime" v-model="abroadWaybillReportQueryData.rangeCreatedTime[0]" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                :style="{width: '100%'}" placeholder="开始时间(带时分秒)" clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="-" prop="rangeCreatedTime" label-width="30px">
                <el-date-picker type="datetime" v-model="abroadWaybillReportQueryData.rangeCreatedTime[1]" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                :style="{width: '100%'}" placeholder="结束时间(带时分秒)" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>


         <!-- <el-form-item label="创建日期" prop="rangeCreatedTime">
            <el-date-picker type="datetimerange" :editable="false" :picker-options="pickerOptions" v-model="abroadWaybillReportQueryData.rangeCreatedTime"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" start-placeholder="开始时间(带时分秒)"
                            end-placeholder="结束时间(带时分秒)" range-separator="至" clearable></el-date-picker>
          </el-form-item>-->
          <el-row>
            <el-col :span="13">
              <el-form-item label="入库日期" prop="rangeInStockDate">
                <el-date-picker v-model="abroadWaybillReportQueryData.rangeInStockDate[0]" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="开始日期" clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="-" prop="rangeInStockDate" label-width="30px">
                <el-date-picker v-model="abroadWaybillReportQueryData.rangeInStockDate[1]" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="结束日期" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="13">
              <el-form-item label="" prop="rangeInStockTime">
                <el-date-picker type="datetime" v-model="abroadWaybillReportQueryData.rangeInStockTime[0]" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                :style="{width: '100%'}" placeholder="开始时间(带时分秒)" clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="-" prop="rangeInStockTime" label-width="30px">
                <el-date-picker type="datetime" v-model="abroadWaybillReportQueryData.rangeInStockTime[1]" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                :style="{width: '100%'}" placeholder="结束时间(带时分秒)" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="13">
              <el-form-item label="出库日期" prop="rangeOutStockDate">
                <el-date-picker v-model="abroadWaybillReportQueryData.rangeOutStockDate[0]" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="开始日期" clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="-" prop="rangeOutStockDate" label-width="30px">
                <el-date-picker v-model="abroadWaybillReportQueryData.rangeOutStockDate[1]" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="结束日期" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="13">
              <el-form-item label="" prop="rangeOutStockTime">
                <el-date-picker type="datetime" v-model="abroadWaybillReportQueryData.rangeOutStockTime[0]" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                :style="{width: '100%'}" placeholder="开始时间(带时分秒)" clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="-" prop="rangeOutStockTime" label-width="30px">
                <el-date-picker type="datetime" v-model="abroadWaybillReportQueryData.rangeOutStockTime[1]" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                :style="{width: '100%'}" placeholder="结束时间(带时分秒)" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="13">
              <el-form-item label="处理时间" prop="rangeDisposeTimeDate">
                <el-date-picker v-model="abroadWaybillReportQueryData.rangeDisposeTimeDate[0]" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="开始日期" clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="-" prop="rangeOutStockDate" label-width="30px">
                <el-date-picker v-model="abroadWaybillReportQueryData.rangeDisposeTimeDate[1]" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="结束日期" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5">
          <el-form-item label="运单号" prop="waybillNos">
            <el-input v-model="abroadWaybillReportQueryData.waybillNos" type="textarea"
                      :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
          </el-form-item>

          <el-form-item label="主单号" prop="masterNos">
            <el-input v-model="abroadWaybillReportQueryData.masterNos" type="textarea"
                      :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
          </el-form-item>


        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import { m } from "@/store/yg/common/local";
  import { ajax } from "@/store/yg/common/utils";
  export default {
    components: {},
    props: {
      statementSource:{
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data() {
      return {
        abroadWaybillReportQueryData: {
          customerId: null,
          salesmanIds: [],
          servicesIds: [],
          countryId: [],
          shippingWays: [],
          status: [],
          // rangeCreatedDate: null,
          rangeCreatedTime: [],
          rangeInStockDate: [],
          rangeInStockTime: [],
          rangeOutStockDate: [],
          rangeOutStockTime: [],
          rangeDisposeTimeDate: [],
          rangeSignDate: [],
          waybillNos: null,
          masterNos: null
        },
        abroadWaybillReportQueryRules: {
        },
        customerIdOptions: {},
        serviceCompanyOptions: []
      }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      async remoteCustomer(query){
        if (query !== '') {
          this.customerIdOptions = await ajax("searchCustomerSelect", {
            name: query
          });

        }else {
          this.customerIdOptions = {};
        }
      },
      // async remoteServicerCompany(query){
      //   if (query !== '') {
      //     this.serviceCompanyOptions = await ajax("searchServiceCompanySelect", {
      //       name: query
      //     });
      //   }else {
      //     this.serviceCompanyOptions = {};
      //   }
      // },
      m(params) {
        return m(params)
      }
    }
  }

</script>
<style>
</style>
